<template>
  <div>
    <h4>欢迎光临~vue开发的收银系统--水果店</h4>
   <table border="1">
        <tr>
          <td>苹果10￥/斤，折扣8折</td>
        </tr>
        <tr>
          <td>请输入你要购买的斤数 <input type="text" v-model="count"></td>
        </tr>
        <tr>
          <td><button @click.prevent="money">结账买单~</button></td>
        </tr>
        <tr>
          <td>结账单：总价：{{total}}元 || 折后价{{reprice}}元 || 省了{{save}}元 </td>
        </tr>
   </table>
  </div>
</template>

<script>
export default {
  data() {
    return{
      count:'',
      total:'0',
      reprice:'0',
      save:'0'
    }
  },
  methods:{
    money() {
      this.total=10*this.count
      this.reprice=10*this.count*0.8
      this.save=this.total-this.reprice
    }
  }
}
</script>

<style>
div h4 {
  margin-left: 60px;
  margin-bottom: 5px;
  font-weight: normal;
}
table {
  width: 400px;
  height: 200px;
  text-align: center;
}
table tr:first-child {
  font-weight: 700;
}
</style>